<template>
    <div>
        <div class="menuadd">
            <el-button round type="primary" plain @click="addmenu">添加</el-button>
        </div>
        <el-table :data="goodslist" style="width: 100%">
            <el-table-column fixed prop="id" label="序号" width="150">
            </el-table-column>
            <el-table-column prop="firstcatename" label="一级分类" width="120">
            </el-table-column>
            <el-table-column prop="secondcatename" label="二级分类" width="120">
            </el-table-column>
            <el-table-column prop="goodsname" label="商品名称" width="120">
            </el-table-column>
            <el-table-column prop="img" label="商品图片" width="100">
                <template v-slot="$prop">
                    <img height="100px" :src="$prop.row.img" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="price" label="商品价格" width="120"> </el-table-column>
            <el-table-column prop="market_price" label="市场价格" width="120"> </el-table-column>
            <el-table-column prop="isnew" label="是否新品" width="120">
                <template v-slot="$prop">
                    <el-tooltip class="item" effect="dark" :content="$prop.row.isnew == 1 ? '是' : '不是'" placement="top">
                        <el-switch v-model="$prop.row.isnew" active-color="#ff6041" inactive-color="#ccc"
                            :active-value="1" :inactive-value="0">
                        </el-switch>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="ishot" label="是否热卖" width="120">
                <template v-slot="$prop">
                    <el-tooltip class="item" effect="dark" :content="$prop.row.ishot == 1 ? '是' : '不是'" placement="top">
                        <el-switch v-model="$prop.row.ishot" active-color="#ff6041" inactive-color="#ccc"
                            :active-value="1" :inactive-value="0">
                        </el-switch>
                    </el-tooltip>
                </template>

            </el-table-column>
            <el-table-column prop="state" label="商品状态" width="120">
                <template v-slot="$prop">
                    <el-button v-if="$prop.row.status == 1" round type="primary" size="mini" plain>正常</el-button>
                    <el-button v-else round type="warning" size="mini" plain>禁用</el-button>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="160">
                <template v-slot="$prop">
                    <el-button round type="primary" size="mini" @click="change($prop.row)" plain>编辑</el-button>
                    <el-button round type="danger" size="mini" @click="del($prop.row.id)" plain>
                        删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                layout="sizes, prev, pager, next, jumper" :total="400" background>
            </el-pagination>
        </div>
        <v-dialog :info="info" ref="son" />
    </div>

</template>


<script>
import { mapActions, mapState } from 'vuex';
import vDialog from "./dialog.vue"
export default {
    computed: {
        ...mapState("goods", ["goodslist", "goodscount"])
    },
    methods: {
        ...mapActions("goods", ["getgoodslist", "getgoodscount"]),
        // 删除
        del(id) {
            this.$confirms(() => {
                this.$Api.goodsdelete({ id }).then((res) => {
                    console.log(res, 111111);
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        this.getgoodscount()
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            })
            console.log(id, "删除");
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 编辑
        change() {
            this.info.isShow = true
        },
        addmenu() {
            this.info.isShow = true
        },
        // 分页
        handleCurrentChange(page) {
            this.page = page;
            this.getgoodslist({ page, size: this.size })
            this.getgoodscount()
        },
    },
    mounted() {
        this.getgoodslist({ page: this.page, size: this.size })
        this.getgoodscount()
    },
    data() {
        return {
            size: 5,
            page: 1,
            currentPage4: 1,
            info: {
                isShow: false
            }
        }
    },
    components: {
        vDialog
    }
}

</script>


<style leng='less' scoped>
.block {
    float: left;
}
</style>